<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right" :style="style">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">病人类型</span>
            <el-radio-group v-model="formInfo.brlx" @change="radioChange">
              <el-radio label="1"><span class="radio_tip">出院</span></el-radio>
              <el-radio label="2"><span class="radio_tip">住院</span></el-radio>
            </el-radio-group>
          </div>
          <div v-if="isShow" class="fl">
            <span class="c_tip">出院科室</span>
            <input type="text" class="c_input c_search" placeholder="请输入出院科室">
            <i class="c_searchbtn" @click="chooseDialogs('出院科室','electronicMedicine','cyks',true)">选择</i>
          </div>
          <div v-else class="fl">
            <span class="c_tip">当前科室</span>
            <input type="text" class="c_input c_search" placeholder="请输入当前科室">
            <i class="c_searchbtn" @click="selectPop('当前科室')">选择</i>
          </div>

          <div class="fl">
            <span class="c_tip">主管医生</span>
            <input type="text" class="c_input c_search" placeholder="请输入主管医生">
            <i class="c_searchbtn" @click="selectPop('主管医生')">选择</i>
          </div>
          <div class="fl">
            <span class="c_tip">病人姓名</span>
            <input type="text" class="c_input" placeholder="请输入病人姓名">
          </div>
          <div class="fl">
            <span class="c_tip">药品</span>
            <input type="text" class="c_input c_search" placeholder="请输入药品">
            <i class="c_searchbtn" @click="selectPop('药品')">选择</i>
          </div>

          <div class="fl">
            <span class="c_tip">住院号</span>
            <input type="text" class="c_input c_search" placeholder="请输入住院号">
            <i class="c_searchbtn" @click="selectPop('药品')">导入</i>
          </div>

          <div class="fl">
            <span class="c_tip">诊断</span>
            <input type="text" class="c_input c_search" placeholder="请输入诊断">
            <i class="c_searchbtn" @click="selectPop('诊断 ')">选择</i>
          </div>
          <div v-if="isShow" class="fl">
            <span class="c_tip">出院时间</span>
            <el-date-picker
              v-model="formInfo.cysj"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            />
          </div>

        </div>
        <div class="sbtn_box">
          <el-button type="primary" class="btn_clear" style="margin-left:7px;">筛选</el-button>
          <el-button type="danger" class="btn_clear">重置</el-button>
          <el-button type="success" class="btn_success" style="margin-left:7px;">查看电子药历</el-button>
        </div>
        <div v-if="!sbtnFlag" class="show_btn" @click="showMore">
          <i class="el-icon-caret-bottom" />
          <span>显示更多</span>
        </div>
        <div v-if="sbtnFlag" class="show_btn" @click="showHide">
          <i class="el-icon-caret-top" />
          <span>收起</span>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div class="table_box">
      <em-table />
    </div>
    <main-dialog
      :is-visible="isVisible"
      :dialog-info="dialogInfo"
      @closeDialog="closeDialog"
      @selectedResultMain="selectedResultMain"
    />
  </div>

</template>

<script>
import EmTable from './childComps/EmTable'
import MainDialog from '../childComps/Dialog/MainDialog'

export default {
  name: 'ElectronicMedicine',
  components: {
    EmTable,
    MainDialog
  },
  data() {
    return {
      formInfo: {
        brlx: '1', cysj: '', cyks: '', zgys: '', brxm: '',
        yp: '', zyh: '', zd: '', ks: '', cjr: ''
      },
      isShow: true,
      isVisible: false,
      selectedResult: '',
      dialogInfo: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      checkList: ['禁忌'],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      value1: '',
      dialogDrugs: false,
      dialogDoctor: false,
      dialogPerson: false,
      departmentData: [{
        date: '2016-05-03',
        name: '王小虎'
      }, {
        date: '2016-05-03',
        name: '王小虎'
      }],
      multipleSelection: [],
      input: '',
      pType: '11',
      sbtnFlag: false,
      style: 'height: 60px;padding-top: 10px;'
    }
  },
  // components: { Ptctable, Poptable },
  methods: {
    radioChange() {
      this.isShow = this.formInfo.brlx === '1'
    },
    chooseDialogs(title, father, infoData, isTransfer) {
      this.dialogInfo.title = title
      this.dialogInfo.father = father
      this.dialogInfo.infoData = infoData
      this.dialogInfo.isTransfer = isTransfer
      this.isVisible = true
    },
    //  保存selectedResult
    selectedResultMain(value) {
      this.selectedResult = value
      this.isVisible = false
    },
    closeDialog(value) {
      this.isVisible = value
    },
    showMore() {
      this.sbtnFlag = true
      this.style = ''
    },
    showHide() {
      this.sbtnFlag = false
      this.style = 'height: 60px;padding-top: 10px;'
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  body{
    background:#e6edf5;
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        padding:15px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:104px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .radio_tip{
          display:inline-block;
          width:36px;
          padding-right:10px;
          text-align:right;
          font-size: 12px;
        }
        .c_input{
          width:131px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:90px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:60px;
          height:40px;
          line-height:40px;
        }
        .btn_success{
          padding:0;
          width:120px;
          height:40px;
          line-height:40px;
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_search{
            width:100px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }

</style>
